<template>
  <el-card class="box-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <el-button icon="Back" @click="goPrevDate"></el-button>
        <span>
          <el-date-picker
            v-model="theDate"
            type="date"
            :clearable="false"
            value-format="YYYY-MM-DD"
            style="width: 120px"
            @change="handleDateChange"
          />
        </span>
        <el-button
          icon="Right"
          :disabled="isToday"
          @click="goNextDate"
        ></el-button>
      </div>
    </template>

    <div class="search-container">
      <el-input
        v-model="filterText"
        placeholder="关键字..."
        class="mb-10 filter-input"
        clearable
        @input="handleFilter"
      />
    </div>
    <div class="tree-div">
      <el-tree
        ref="allTreeRef"
        v-loading="treeLoading"
        element-loading-text="加载中..."
        :data="treeData"
        :props="{
          value: 'id',
          label: 'label',
          children: 'children',
          class: (data) => 'label' + data.id,
        }"
        :current-node-key="139"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        node-key="id"
        :default-expanded-keys="[139]"
        accordion
        highlight-current
        check-strictly
      >
        <template #default="{ node, data }">
          <span
            class="custom-tree-node"
            :class="{ active: curDataId === data.id }"
            @click="handelDeptSelect(data)"
          >
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </el-card>
</template>

<script setup name="DeptSelector">
import { computed, nextTick, ref, onMounted } from "vue";
import dayjs from "dayjs";

const props = defineProps({
  selectFirst: {
    type: Boolean, // 是否自动选择第一个; 优先以登录用户
    default: false,
  },
  selectLogin: {
    type: Boolean, // 是否自动选择登录用户
    default: false,
  },
});

const emits = defineEmits(["change", "date-change"]);

const theDate = ref("");
const treeData = ref([]);
const selectedUser = ref(null);
const curDataId = ref(""); // 当前选中数据
const treeLoading = ref(false);
const filterText = ref("");
const allTreeRef = ref();
const selectedId = ref(null);

const isToday = computed(() => {
  return theDate.value === dayjs().format("YYYY-MM-DD");
});

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

const handleFilter = (val) => {
  allTreeRef.value?.filter(val.trim());
};

const getTreeData = async () => {
  treeLoading.value = true;
  setTimeout(() => {
    treeLoading.value = false;
    treeData.value = [
      {
        id: 101,
        parentId: 100,
        label: "万普隆能源",
        weight: 1,
        children: [
          {
            id: 103,
            parentId: 101,
            label: "总裁办",
            weight: 1,
          },
          {
            id: 104,
            parentId: 101,
            label: "监审部",
            weight: 2,
          },
          {
            id: 128,
            parentId: 101,
            label: "市场营销部",
            weight: 3,
          },
          {
            id: 111,
            parentId: 101,
            label: "安全管理部",
            weight: 4,
          },
          {
            id: 60102,
            parentId: 101,
            label: "经营管理部",
            weight: 5,
            children: [
              {
                id: 107,
                parentId: 60102,
                label: "试采中心",
                weight: 1,
                children: [
                  {
                    id: 127,
                    parentId: 107,
                    label: "连油队",
                    weight: 1,
                  },
                ],
              },
              {
                id: 129,
                parentId: 60102,
                label: "陕晋大区",
                weight: 2,
                children: [
                  {
                    id: 120114,
                    parentId: 129,
                    label: "宜川项目02",
                    weight: 0,
                  },
                ],
              },
              {
                id: 130,
                parentId: 60102,
                label: "川渝大区",
                weight: 3,
                children: [
                  {
                    id: 150109,
                    parentId: 130,
                    label: "部门推送",
                    weight: 0,
                  },
                  {
                    id: 90104,
                    parentId: 130,
                    label: "浙江油田项目部",
                    weight: 1,
                  },
                  {
                    id: 90105,
                    parentId: 130,
                    label: "重页司项目部",
                    weight: 2,
                  },
                  {
                    id: 90106,
                    parentId: 130,
                    label: "川页司",
                    weight: 3,
                  },
                  {
                    id: 60104,
                    parentId: 130,
                    label: "长宁项目",
                    weight: 4,
                  },
                  {
                    id: 60105,
                    parentId: 130,
                    label: "丰202项目",
                    weight: 5,
                  },
                  {
                    id: 60106,
                    parentId: 130,
                    label: "白马项目",
                    weight: 6,
                  },
                ],
              },
              {
                id: 106,
                parentId: 60102,
                label: "煤层气西北大区",
                weight: 4,
                children: [
                  {
                    id: 313,
                    parentId: 106,
                    label: "宁夏石嘴山项目部",
                    weight: 2,
                  },
                  {
                    id: 90109,
                    parentId: 106,
                    label: "科林思德项目",
                    weight: 3,
                  },
                  {
                    id: 90110,
                    parentId: 106,
                    label: "贵州/安徽项目",
                    weight: 3,
                  },
                ],
              },
              {
                id: 90107,
                parentId: 60102,
                label: "智控中心",
                weight: 4,
              },
              {
                id: 90111,
                parentId: 60102,
                label: "煤层气山西大区",
                weight: 5,
                children: [
                  {
                    id: 90113,
                    parentId: 90111,
                    label: "蓝焰项目",
                    weight: 0,
                  },
                  {
                    id: 90119,
                    parentId: 90111,
                    label: "三交项目",
                    weight: 0,
                  },
                  {
                    id: 315,
                    parentId: 90111,
                    label: "柿庄南项目部",
                    weight: 1,
                  },
                  {
                    id: 205,
                    parentId: 90111,
                    label: "临汾排采项目部",
                    weight: 3,
                  },
                  {
                    id: 317,
                    parentId: 90111,
                    label: "临汾自动化项目部",
                    weight: 4,
                  },
                  {
                    id: 318,
                    parentId: 90111,
                    label: "马必项目部",
                    weight: 5,
                  },
                  {
                    id: 206,
                    parentId: 90111,
                    label: "临兴项目部",
                    weight: 6,
                  },
                  {
                    id: 319,
                    parentId: 90111,
                    label: "武乡项目部",
                    weight: 7,
                  },
                  {
                    id: 320,
                    parentId: 90111,
                    label: "三交北项目部",
                    weight: 8,
                  },
                  {
                    id: 324,
                    parentId: 90111,
                    label: "紫金山项目部",
                    weight: 9,
                  },
                ],
              },
              {
                id: 124,
                parentId: 60102,
                label: "煤层气工程中心",
                weight: 7,
              },
            ],
          },
          {
            id: 113,
            parentId: 101,
            label: "财务部",
            weight: 6,
            children: [
              {
                id: 90118,
                parentId: 113,
                label: "财务中心",
                weight: 6,
              },
            ],
          },
          {
            id: 139,
            parentId: 101,
            label: "采供部",
            weight: 6,
          },
          {
            id: 112,
            parentId: 101,
            label: "人力资源部",
            weight: 7,
            children: [
              {
                id: 150113,
                parentId: 112,
                label: "大学生",
                weight: 0,
              },
            ],
          },
          {
            id: 138,
            parentId: 101,
            label: "装备部",
            weight: 8,
            children: [
              {
                id: 204,
                parentId: 138,
                label: "运维组",
                weight: 0,
              },
              {
                id: 301,
                parentId: 138,
                label: "质量组",
                weight: 0,
              },
              {
                id: 302,
                parentId: 138,
                label: "资产组",
                weight: 0,
              },
            ],
          },
          {
            id: 120,
            parentId: 101,
            label: "研发部",
            weight: 9,
            children: [
              {
                id: 121,
                parentId: 120,
                label: "软件中心",
                weight: 1,
              },
              {
                id: 122,
                parentId: 120,
                label: "硬件中心",
                weight: 2,
              },
              {
                id: 140,
                parentId: 120,
                label: "测试组",
                weight: 3,
              },
              {
                id: 60112,
                parentId: 120,
                label: "产品化中心",
                weight: 4,
              },
              {
                id: 114,
                parentId: 120,
                label: "技术中心",
                weight: 10,
                children: [
                  {
                    id: 137,
                    parentId: 114,
                    label: "试验监控一组",
                    weight: 1,
                  },
                  {
                    id: 311,
                    parentId: 114,
                    label: "试验监控二组",
                    weight: 2,
                  },
                  {
                    id: 312,
                    parentId: 114,
                    label: "试验监控三组",
                    weight: 3,
                  },
                ],
              },
            ],
          },
          {
            id: 136,
            parentId: 101,
            label: "行政部",
            weight: 11,
          },
        ],
      },
    ];
  }, 300);

  setDefaultVal(); // 设置默认值
};

const resetTreeAndData = () => {
  filterText.value = "";
  selectedId.value = null;
};

function setDefaultVal() {
  nextTick(() => {
    // 树组件第一个节点部门
    if (props.selectFirst && treeData.value && treeData.value[0]) {
      selectedId.value = treeData.value[0].id;
      allTreeRef.value?.setCurrentKey(treeData.value[0].id);
      emits("change", {
        id: treeData.value[0].id,
        label: treeData.value[0].label,
        parentId: treeData.value[0].parentId,
        weight: treeData.value[0].weight,
        date: theDate.value,
      });
      return;
    }
  });
}

function handelDeptSelect(data) {
  localStorage.setItem("lastDailyDeptId", data.id);
  emits("change", { ...data, date: theDate.value });
  curDataId.value = data.id;
}

// 获取上一天的日期
function goPrevDate() {
  theDate.value = dayjs(theDate.value).subtract(1, "day").format("YYYY-MM-DD");
  resetTreeAndData();
  getTreeData();
}

// 获取下一天的日期
function goNextDate() {
  theDate.value = dayjs(theDate.value).add(1, "day").format("YYYY-MM-DD");
  resetTreeAndData();
  getTreeData();
}

function handleDateChange() {
  resetTreeAndData();
  getTreeData();
}

onMounted(() => {
  // 获取昨天
  theDate.value = dayjs().subtract(1, "day").format("YYYY-MM-DD");
  getTreeData();
});
</script>

<style scoped>
.box-card {
  height: calc(100% - 3px);
}
:deep(.el-card__body) {
  padding: 6px 0 16px 0 !important;
  height: calc(100% - 42px);
}
:deep(.el-card__header) {
  padding: 7px 10px 7px !important;
  background-color: #f5f5f5;
  border-bottom: #dcdfe6 solid 1px;
}
.tree-div {
  height: calc(100% - 41px);
  overflow-y: auto;
}
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-title {
  font-weight: bold;
  font-size: 14px;
}
.search-container {
  padding: 4px 10px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 18px 8px 6px;
  font-size: 14px;
  width: 100%;
}

.custom-tree-node.active {
  color: #409eff;
}
</style>
